<template>
  <div class="NotPage">
    <img src="../assets/public/404.png">
    <div>
      <div class="text">抱歉，您访问的页面不存在...</div>
      <div class="hint" @click="back">返回上一页 ({{countdown}}s)</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NotPage',

    data() {
      return {
        countdown: 5,
      };
    },

    mounted() {
      // 倒计时后退
      this.timer = this.$utils.date.countdown((current)=>{
        this.countdown = current + 1;
      }, ()=>{
        this.back();
      }, 5000);
    },

    computed: {},

    methods: {
      back(){
        this.$router.back();
        clearInterval(this.timer);
      },
    }
  };
</script>

<style scoped lang="less">
  .NotPage {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: -120px;
    .text{
      font-size: 16px;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
      font-weight: 400;
      text-align: center;
      color: #09266f;
      line-height: 21px;
      margin-top: 24px;
    }
    .hint{
      margin-top: 8px;
      font-size: 14px;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
      font-weight: 400;
      text-align: right;
      color: #09266f;
      line-height: 21px;
      cursor: pointer;
    }
  }
</style>